.reveal-container{
  width: 100%;
  margin-top: 20px;
  > h2{
    color: #f0e6d2;
    font-size: 22px;
    margin: 56px 8px 8px;
  }
  p{
    color: #cdbe91;
    font-size: 14px;
    margin: 8px;

    > code{
      border-radius: 1px;
      background: rgba(164, 184, 171, 0.5);
      padding: 1px;
      margin: 4px;
    }
  }

  .fold-code{
    border: 2px solid #c89f48;
    .demo-wrapper{
      padding: 16px 18px;
    }
    &:hover {
      box-shadow: 0 0 8px 0 rgb(95, 95, 54), 0 2px 4px 0 rgb(133, 123, 74);
    }

    .per-wrapper{
      overflow: hidden;
      .per-content{
        overflow-y: hidden;
        background: rgba(149, 155, 154, 0.1);
        transition: all 0.25s;
        #code-wrapper{
          font-size: 14px;
          word-break: break-word;
          overflow: auto;
          &>pre{
            background: rgba(183, 196, 190, 0) !important;
            > .language-jsx{
              overflow: auto !important;
              white-space: pre !important;
            }
          }
        }
      }
      .demo-block-control{
        border-top: 2px solid #c89f48;
        display: flex;
        justify-content: center;
        align-items: center;
        background: rgba(183, 196, 190, 0);
        button {
          margin: 6px;
        }
        .down{
          width: 18px;
          height: 18px;
        }
      }
    }
  }
}